<script>
import { ElMessage } from 'element-plus'
import md5 from 'md5'
import axios from 'axios'

import { loginFn } from '@/api/user'

import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      adminname: '',
      password: ''
    }
  },
  computed: {
    //将全局状态中的数据通过 mapState 辅助函数映射的方式获取
    // ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['updateUserInfo']),
    submitForm() {
      //表单验证账号密码校验
      //#region
      // console.log('提交内容:', this.adminname, this.password)
      // if (this.adminname.length < 6) {
      //   //提示用户长度不够
      //   ElMessage({
      //     showClose: true,
      //     message: '管理员账号要大于等于6位',
      //     type: 'error'
      //   })
      //   //如果条件不成立就直接return出去,不让代码继续执行
      //   return
      // }
      // // console.log();
      // if (!/^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(this.password)) {
      //   ElMessage({
      //     showClose: true,
      //     message: '管理员密码应该包含一个大写字母,一个小写字母以及特殊符号',
      //     type: 'error'
      //   })
      //   //如果条件不成立,就不让代码继续执行了
      //   return
      // }

      // MD5加密时担心密码会被解密,可以通过,拆解密码字符串,然后拼接一些特殊符号,来保证密码的安全性
      // console.log(md5('@5#21千峰~'))
      // console.log(md5('maomao123'))

      //#endregion

      // 发送数据的请求,进行用户的登录
      //发送数据请求,可以直接使用axios进行发送请求
      // 如果页面请求的接口很多,服务器或者ip地址一旦发生改变
      //那么我们就需要修改很多的地方,所以我们需要将请求再次进行封装

      //#region
      // axios
      //   .get('http://121.89.205.189:3000/api/pro/list')
      //   .then(function (response) {
      //     console.log(response)
      //   })
      //   .catch(function (error) {
      //     console.log(error)
      //   });
      //#endregion

      //发送数据请求
      loginFn({
        adminname: this.adminname,
        password: this.password
      }).then(res => {
        // console.log(res)
        if (res.code === '10005') {
          //未注册
          ElMessage.error(res.message)
          return
        } else if (res.code === '10003') {
          //密码错误
          ElMessage.error(res.message)
          return
        } else if (res.code === '66666') {
          //请输入完整信息,防止用户输入信息不完善
          ElMessage.error(res.message)
          return
        } else {
          // 第一步登陆记录用户信息,
          // 第二步记录完用户信息跳转到首页

          //登陆成功
          // console.log(res.data)

          // 第一种修改数据的方法
          // this.$store.commit('updateUserInfo',res.data)

          //第二种 通过 mapMutations 修改数据的方法
          this.updateUserInfo(res.data)
          // console.log(res.data)

          //在登陆成功之后将 token 存到本地,方便我们后期请求时在拦截器中使用
          localStorage.setItem('token', res.data.token)

          // 跳转到首页
          // this.$router 使我们路由跳转对象
          //.push('/')需要进入到哪个路由页面中
          this.$router.push('/manager/managerlist')
        }
      })
    }
  }
}
</script>
<template>
  <div class="login-container">
    <div class="form-wrap">
      <!-- <h2 class="header">商城后台管理系统登录{{ $store.state.count }}----{{ count }}</h2> -->
      <h2 class="header">商城后台管理系统登录</h2>
      <el-input v-model="adminname" clearable :minlength="6" placeholder="请输入管理员账号" />
      <el-input v-model="password" clearable class="psw" placeholder="请输入管理员密码" />
      <el-button type="success" @click="submitForm">登陆</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.login-container {
  height: 100%;
  background-color: #e6fcf5;
  background: url(../assets/login.jpg) no-repeat 100%/100%;

  .form-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 15px;
    padding: 32px;

    .header {
      text-align: center;
      margin-bottom: 32px;
    }

    .psw {
      margin-top: 20px;
    }

    .el-button {
      width: 100%;
      margin-top: 20px;
    }
  }
}
</style>
